<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/template-native.js"></script>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script id="tem" type="text/html">
    <% for (var i = 0 ; i < comments.length ; i++) { %>
      <div class="message-content" uid="<%= comments[i].id%>">
        <div class="message-left">
          <a href="#" class="message-photo"><img src="./img/photo.png">
          </a>
          <p class="message-name"><%= comments[i].name %></p>
        </div>
        <div class="message-right">
          <p class="floor">
            <span>第<%= comments[i].id %>楼</span>
            <span class="delete">删除</span>
          </p>
          <p class="content"><%= comments[i].content %></p>
        </div>
      </div>
    <% } %>
  </script>
</head>
<body>
  <div class="message-board">
    <p class="message-title">留言板</p>
    <div>
      <div class="send">
        <span class="send-title">主人寄语</span>
        <span class="send-btn">编辑您的寄语
        </span>
      </div>
      <p class="exhibition"></p>
      <div class="send-content hidden">
        <textarea class="edit-exhibtion" cols="60" rows="10"></textarea>
        <div class="btn">
          <input type="button" value="发表" class="submit">
        </div>
      </div>
    </div>
    <div class="message">
      <div class="leave-message">
        <p class="leave-title"></p>
        <div class="list">
        </div>
        <span class="edit-btn">我要留言</span>
        <div class="edit-content hidden">
          <p>发表您的留言</p>
          <label for="name">用户名：</label><input type="text" id="name" class="name">
          <textarea cols="60" rows="10"></textarea>
          <div class="btn">
            <input type="button" value="发表" class="user-sumbit">
            <input type="button" value="取消" class="user-cancel">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    var list = $(".list");
    var editBtn = $(".edit-btn");
    var sendBtn = $(".send-btn");
    var userSumbit = $(".user-sumbit");
    var userCancel = $(".user-cancel");
    var editContent = $(".edit-content");
    var sendContent = $(".send-content");
    var ownerSumbit = $(".submit");
    var deleteBtn = $(".delete");
    
    getData();
    getMessage();
    // 获取留言
    function getData() {
      $.ajax({
        url: "http://localhost:3000/db",
        type: "GET",
        success: function(data) {
          // 将模板添加到页面中
          list.html(template("tem", data));
          // console.log(data);
          // 给删除按钮绑定事件
          deleteData();
          // 获取留言数量
          $(".leave-title").text(`留言(${data.comments.length})`);
        }
      });
     
    }
    // 获取寄语
    function getMessage() {
      $.ajax({
        url:"http://localhost:3000/db",
        type:"GET",
        success:function(data) {
          // console.log(data.message.info);
          $(".exhibition").text(data.message.info);
        }
      })
    }      
    // 给删除按钮注册绑定
    function deleteData() {
      $(".message-right .delete").click(function() {
        temp = $(this).parents(".message-content");
        uid = temp.attr("uid");
        $.ajax({
          url: "http://localhost:3000/comments/" + uid,
          type: "DELETE",
          success:function() {
            getData();
          }
        })
        temp.remove();
      });
    }
    // 修改寄语
    ownerSumbit.click(function() {
      var edit = $(".edit-exhibtion").val();
      console.log(edit);
      $.ajax({
        url: "http://localhost:3000/message",
        type: "POST",
        dataType: "json",
        data: {
          id: 1,
          info: edit
        },
        success: function() {
          getMessage();
        }
      })
      $(".edit-exhibtion").val("");
      sendContent.css("display", "none");
    })
    // 点击“我要留言”
    editBtn.click(function() {
      editContent.toggle(".hidden");
    })
    // 点击“编辑寄语”
    sendBtn.click(function() {
      sendContent.toggle(".hidden");
    })
    // 新增留言
    userSumbit.click(function() {
      var username = $(".name").val();
      var content = $(".edit-content textarea").val();
      if(!username || !content) {
        alert("请输入用户名和留言内容~");
        return;
      }
      $.ajax({
        url: "http://localhost:3000/comments",
        type: "POST",
        dataType: "json",
        data: {
          name: username,
          content: content
        },
        success: function(data) {
          getData();
        }
      });
      $(".name").val("");
      $(".edit-content textarea").val("");
    });
    userCancel.click(function() {
      editContent.css("display","none");
    });
  </script>
</body>
</html>